$(() => {
    var arr =[
        {
            icon:"../images/2.jpg",
            small:"../images/2.jpg",
            big:"../images/1.jpg"
        },
        {
            icon:"../images/111.bmp",
            small:"../images/111.bmp",
            big:"../images/222.bmp"
        }
    ];
    
    // 发送ajax 请求数据 回来之后进行渲染页面
    $.ajax({
        url: "/php/getGoodsInfoById.php",
        //发送ajax请求到获取商品信息id的php
        data: {
            id: location.hash.slice(1)
        },
        //这边发送什么那边获取什么
        //location.hash是#43,.slice(1)是从第一个开始截取>>43
        dataType: "json",
        //返回数据的格式
        type: "get",
        // 获取类型用get
        success(data) {
            console.log(data);
            //发送成功输出data
            if (!data.error) {
                //如果请求回来的数据没有错误,那么我就指定格式
                $("#intro").html(data.data.goods_introduce);
                //获取intro介绍信息
                // let obj1 = {...obj}不能写ES9的语法,否则无法编译
                //<<<<<<<<<<<<渲染右边>>>>>>>
                let str1 = `<h3>${data.data.goods_name}</h3>
                <div><span>友情价:</span><span>¥${data.data.goods_price}</span></div>
                <div id="address" class="address">
                    <div class="select">
                        <h4 id="totalAddress">请选择地址</h4>
                        <div id="area" class="area">
                            <div class="province">
                                <div class="t1">省</div>
                                <div class="list active">
                                </div>
                            </div>
                            <div class="city">
                                <div class="t1">市</div>
                                <div class="list"></div>
                            </div>
                            <div class="dist">
                                <div class="t1">区</div>
                                <div class="list"></div>
                            </div>
                            <div class="road">
                                <div class="t1">路</div>
                                <div class="list"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <button id="joinCart" class="btn btn-danger">加入购物车</button>
                <a href="./shoppingCart.html" class="btn btn-danger">立即购买</a>
                `
                // address地址select选择挑选total总的province省city市dist区road路list一览表名单
                //"btn btn-danger"bootsteap红色按钮写法;加入id,用来获取该按钮
                //点立即购买,就会运转a标签,进入加入购物车

                $("#info").html(str1);

                
                $("#joinCart").on("click", function () {
                    console.log(data.data);
                    // 获取加入购物车加入点击事件
                    var shoppingArr = JSON.parse(localStorage.getItem("shoppingCart")) || [];
                    console.log(shoppingArr);
                    // JSON.parse转换为真正的对象
                    // 先查看数组中是否已有该条数据  如果还没有该条数据 则添加一条 如果已经有了 就不再push而是将该条数据的数量+1 
                    var shoppingInfo = shoppingArr.find(value => value.goods_id === location.hash.slice(1))
                    console.log("商品信息"+shoppingInfo)
                    // 如果该对象已经存在 
                    if (shoppingInfo) {
                        // 如果商品信息存在
                        // 数量++
                        shoppingInfo.num++;
                    } else {
                        // 如果还不存在 则设置一条属性 num 并赋值为1
                        data.data.num  = 1;
                        // 再放入数组
                        shoppingArr.push(data.data);
                    }
                    // 将该条数据存入本地存储
                    localStorage.setItem("shoppingCart", JSON.stringify(shoppingArr));
                  
                    //原来输出的是"[object Object]" ,   JSon.stringArr转成对象格式的字符串,这样,存在本地存储之中的就是一个含有对象的字符串了
                })

                // 鼠标进入省份 发送请求获取所有的省份信息,,发送jsonp
                $(".province").on("mouseenter", function () {
                    // 找到属于省的列表
                    let $list = $(this).find(".list");//this是province
                    $.ajax({
                        url: "https://fts.jd.com/area/get?fid=4744",
                        // 各种省的接口
                        data: "",
                        type: "get",
                        dataType: "jsonp",
                        jsonpCallback: "qf",
                        success(data) {
                            $list.empty();
                            //请求成功之后就清除.list,这样.list上树就不会再次执行,然后
                            console.log(data);
                            data.forEach(value => {
                                $list.append(`<div class="item" data-id="${value.id}">${value.name}</div>`)//将所有的省都上树到省
                            })
                        }
                    })
                })

                // 委托模式>>>>>>
                // 监听省份的点击行为 委托给list下的item(也就是那些省名称)
                $(".province").on("click", ".item", function () {
                    // 获取省份的名字
                    let a = $(this).html() //this其实是.item,因为事情已经委托给了.item
                    console.log(a)//点北京就是北京,点上海就是上海
                    // 显示
                    $(".province .t1").html(a);//将上面这个省字改成(北京>>点的那个东西)
                    // 获取自定义属性 data-id的值
                    let id = $(this).data("id");
                    console.log(id)
                    // 发送请求获取该省所有市
                    $.ajax({
                        url: "https://fts.jd.com/area/get?fid=" + id,
                        //所有市的接口
                        data: "",
                        type: "get",
                        dataType: "jsonp",
                        jsonpCallback: "qf",
                        //数据返回成功之后，回调函数的名字是随机生成的如：jquery0122526({....})在这里,我们可以改变他的名字;;
                        success(data) {
                            $(".city .list").empty();
                            data.forEach(value => {
                                $(".city .list").append(`<div  data-id="${value.id}" class="item">${value.name} </div>`)
                                //将城市填充
                            })

                        }
                    })



                    click.call(this);
                })


                // 监听城市的点击行为
                $(".city").on("click", ".item", function () {
                    // 获取城市的名字
                    let a = $(this).html()
                    // 显示
                    $(".city .t1").html(a);
                    // 获取自定义属性 data-id的值
                    let id = $(this).data("id");
                    console.log(id)
                    // 发送请求获取该城市的所有县区
                    $.ajax({
                        url: "https://fts.jd.com/area/get?fid=" + id,
                        data: "",
                        type: "get",
                        dataType: "jsonp",
                        jsonpCallback: "qf",
                        success(data) {
                            $(".dist .list").empty();
                            data.forEach(value => {
                                $(".dist .list").append(`<div  data-id="${value.id}" class="item">${value.name} </div>`)
                            })

                        }
                    })
                    click.call(this);

                })



                // 监听县区的点击行为
                $(".dist").on("click", ".item", function () {
                    // 获取城市的名字
                    let a = $(this).html()
                    // 显示
                    $(".dist .t1").html(a);
                    // 获取自定义属性 data-id的值
                    let id = $(this).data("id");
                    console.log(id)
                    // 发送请求获取该县区的所有街道
                    $.ajax({
                        url: "https://fts.jd.com/area/get?fid=" + id,
                        data: "",
                        type: "get",
                        dataType: "jsonp",
                        jsonpCallback: "qf",
                        success(data) {
                            $(".road .list").empty();
                            data.forEach(value => {
                                $(".road .list").append(`<div  data-id="${value.id}" class="item">${value.name} </div>`)
                            })

                        }
                    })
                    click.call(this);

                })

                // 监听街道的点击事件
                $(".road").on("click", ".item", function () {
                    // 获取街道的名字
                    let a = $(this).html()
                    // 显示
                    $(".road .t1").html(a);
                    click.call(this);
                    //改变this参数指向,相当于把this也引进来这个this就是委托的item
                })



                function click() {
                    // 定义add变量用于拼接字符串
                    let add = "";
                    // 获取所有的.t1 并转为原生数组
                    let arr = Array.from($(".t1"))
                    // 循环 
                    for (let i = 0; i < arr.length; i++) {
                        add += $(arr[i]).html();
                        if ($(this).parent().prev()[0] === $(".t1")[i]) {
                            //this是某一个item,的父元素上一个元素全等于显示出的省市区路,那么就结束这个循环
                            break;
                        }
                    }
                    console.log(add);
                    $("#totalAddress").html(add)
                    //请选择地址就是add的内容
                }















                // >>>>>渲染左边<<<<<<<
                let $zoom = $("#zoom");
                let str = `   
                 <div class="fdj">
                    <div id="small" class="small">
                        <img id="smallImg" src="${data.data.goods_big_logo}" alt="" class="">
                        <div id="glass" class="glass"></div>
                      </div>

                      <div class="big">
                        <img id="bigImg" src="${data.data.goods_big_logo}" alt="" class="">
                      </div>
                  </div>`

                $zoom.html(str);

                // 获取元素
                var glass = document.getElementById("glass");
                var small = document.getElementById("small");
                var bigImg = document.getElementById("bigImg");
                var big = document.querySelector(".big");
                var smallImg = document.getElementById("smallImg");
                // 根据数组创建icon列表

                var lis = document.querySelectorAll(".list ul li");

                var r = 350 / 197;

                // 鼠标进入 元素显示
                small.onmouseenter = function () {
                    glass.style.display = "block";
                    big.style.display = "block";
                }
                // 鼠标移除 元素隐藏
                small.onmouseleave = function () {
                    glass.style.display = "none";
                    big.style.display = "none";
                }

                small.onmousemove = function (e) {
                    // 计算
                    var resultX = e.pageX - obj.left - glass.clientWidth / 2;
                    var resultY = e.pageY - obj.top - glass.clientHeight / 2;

                    if (resultX < 0) {
                        resultX = 0;
                    } else if (resultX > small.clientWidth - glass.clientWidth) {
                        resultX = small.clientWidth - glass.clientWidth
                    }

                    if (resultY < 0) {
                        resultY = 0;
                    } else if (resultY > small.clientHeight - glass.clientHeight) {
                        resultY = small.clientHeight - glass.clientHeight;
                    }
                    // 获取鼠标在元素内的位置 鼠标在页面中的位置 - 元素在页面中的位置
                    glass.style.left = resultX + "px";
                    glass.style.top = resultY + "px";
                    bigImg.style.left = -resultX * r + "px";
                    bigImg.style.top = -resultY * r + "px"
                }

                // 定义一个函数 获取一个元素到页面两边的距离
                function offset(dom) {
                    // dom表示的是元素 
                    var left = 0;
                    var top = 0;
                    // 当前函数不论传递哪个元素进来都可以获取到该元素距离页面的位置

                    while (dom != document.body) {
                        console.log(dom)
                        left += dom.offsetLeft + dom.clientLeft;
                        top += dom.offsetTop + dom.clientTop;
                        dom = dom.offsetParent;
                    }
                    return {
                        left: left,
                        top: top
                    }
                }


                var obj = offset(small)
            }
        }
    })




})